<template>
    <view class="tab space-between pl-30 pr-30">
        <view
            class="tab-item center ft-30 t-3 h100"
            v-for="(item, index) in tabList"
            :key="index"
            @click="handleClick(item)"
        >
            <text class="tab-item-text" :class="{ active: item.value === orderStatus }">
                {{ item.name }}
            </text>
            <view class="tab-item-line" v-if="item.value === orderStatus"></view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 订单页Tab组件
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'OrderTab'
})
const { orderStatus } = defineProps({
    orderStatus: {
        type: [Number, String],
        default: ''
    }
})

// tab列表数据 订单状态 ''全部 1待付款 2待入住 3入驻中 4已完成
const tabList = ref([
    {
        name: '全部',
        value: ''
    },
    {
        name: '待支付',
        value: 1
    },
    {
        name: '待入住',
        value: 2
    },
    {
        name: '入住中',
        value: 3
    },
    {
        name: '已完成',
        value: 4
    }
])

const emit = defineEmits(['change'])

// 点击切换事件
const handleClick = item => {
    emit('change', item.value)
}
</script>

<style scoped lang="scss">
.tab {
    height: 96rpx;
    border-top: 1px solid rgba($color: $uni-bg-color-grey, $alpha: 0.8);
    background-color: $uni-bg-color;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
    position: relative;
    z-index: 90;
    &-item {
        position: relative;
        &-line {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60rpx;
            height: 2px;
            background-color: $uni-color-primary;
        }
    }
    .active {
        font-weight: bold;
        color: $uni-color-primary;
    }
}
</style>
